<template>
  <div>
    <ul v-if="userList.length">
      <li v-for="(user, i) in userList" :key="i" @click="getUser(user)">
        <el-tag size="small">{{ user.nikeName }}</el-tag>
      </li>
    </ul>
  </div>
</template>

<script>
import { enterSmart, onlineList } from "@/api/chat";
import { mapState, mapMutations } from "vuex";
import { SmartMeeting } from "../model/smartMeeting";

export default {
  name: "wait-users",
  data() {
    return {
      list: [],
      memberId: "",
    };
  },
  computed: {
    ...mapState(["userList", "meetings", "idStore", "smartConcatInfo"]),
  },
  watch: {
    "idStore.waiterId": {
      handler() {
        this.getOnlines();
      },
    },
  },
  mounted() {},
  methods: {
    ...mapMutations([
      "updateMeeting",
      "updateSelecetUserList",
      "onSelectUser",
      "setCurrentChat",
      "setIdStore",
       'setOnlinComplete'
    ]),
    //接入用户，创建小会场
    getUser(user) {
      this.memberId = user.id;
      const params = {
        waiterId: this.smartConcatInfo.talkerId,
        memberId: user.id,
      };
      enterSmart(params)
        .then((res) => {
          if (res.code == 200) {
            const { data } = res;
            const s = `?talkerType=${this.smartConcatInfo.talkerType}&talkerId=${this.smartConcatInfo.talkerId}&meetingId=${data}`;
            const meetingInstantce = new SmartMeeting(s, data); //创建一个小会场ws实例
            // meetingInstantce.createWs();
            // 将meeting实例放入store中
            const params = {
              type: "add",
              key: `ws${data}`,
              value: meetingInstantce,
            };
            this.updateMeeting(params); //更新mettingMap列表
            this.setIdStore({ meetingId: data });
            this.onSelectUser({ meetingId: data }); //选中当前用户
            const userInfo = {
              meetingId: data,
              offline: false,
              active: true,
              unread: 0,
              lastTxt:'',
              lastTime:'',
              memberId: this.memberId,
              nikeName: user.nikeName,
              userType: user.userType,
            };
            this.updateSelecetUserList({ type: "add", ...userInfo }); // 更新选中的列表
            this.setCurrentChat(userInfo);
          }else{
            this.$message.error(`创建小会场失败`);
          }
        })
        .catch(() => {
          this.$message.error(`创建小会场异常`);
        });
    },
    getOnlines() {
      const params = {
        talker: this.idStore.waiterId,
        talkerType: 1,
      };
      onlineList(params)
        .then((res) => {
          const { data } = res;
          data.forEach((element) => {
            this.concatSmartMeeting(element);
          });
        })
        .catch(() => {
          this.$message.error(`获取在线列表接口异常`);
        });
    },
    concatSmartMeeting(user) {
      const s = `?talkerType=${this.smartConcatInfo.talkerType}&talkerId=${this.smartConcatInfo.talkerId}&meetingId=${user.meetingId}`;
      const meetingInstantce = new SmartMeeting(s, user.meetingId); //创建一个小会场ws实例
      // 将meeting实例放入store中
      const params = {
        type: "add",
        key: `ws${user.meetingId}`,
        value: meetingInstantce,
      };
      this.updateMeeting(params); //更新metting列表
      const userInfo = {
        meetingId: user.meetingId,
        offline: false,
        active: false,
        unread: 0,
        lastTxt:'',
        lastTime:'',
        memberId: user.token,
        nikeName: user.username,
        userType: user.userType,
      };
      if (userInfo.userType == "4") {
        //给游客设置名称
        const str = userInfo.memberId.slice(-8);
        userInfo.nikeName = "游客" + str;
      }
      this.updateSelecetUserList({ type: "add", ...userInfo }); // 更新选中的列表
      this.setOnlinComplete(true) 
    },
  },
};
</script>

<style lang="scss" scoped>
.activ {
  background-color: skyblue;
}
li {
  margin: 8px 0;
  height: 40px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>